<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: painting order for fragmented floats that are stacking contexts</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<meta name="flags" content="ahem">
		<meta name="assert" content="Test checks that floats inside a named flow that also create a
				stacking context respect the correct painting order even when fragmented across
				multiple regions that are overlapping.">
		<link rel="match" href="reference/floats-in-named-flow-026-ref.html">
		<style>
		article {
			font-family: Ahem;
			font-size: 20px;
			line-height: 1em;
		}
		.flow {
			flow-into: f;
	
		}
		.float {
			float: left;
			position: relative;
			z-index: 1;
		}

		.back {
			color: green;
			position: relative;
			z-index: 10;
		}

		.front {
			color: red;
			z-index: 20;
		}

		.content {
			color: blue;
		}

		.region {
			/* The region is 115px tall to catch bugs where the floats would be
			sliced rather than properly fragmented */
			height: 115px;
			flow-from: f;
		}

		.shifted {
			position: relative;
			/* See the above comment about the region height */
			top: -115px;
		}

		.region > p {
			background: red;
		}
		</style>
	</head>
	<body>
		<p>
			Test passes if you see two squares, side by side horizontally. The left square should
			be green, the right one should be blue and they should be flush to one another.<br>
			You should see no red.
		</p>

		<div class="region">
			<p>&nbsp;</p>
		</div>
		<div class="shifted region">
			<p>&nbsp;</p>
		</div>

		<article class="flow">
			<div class="float">
				<span class="front">
					xxxxx<br>
					xxxxx<br>
					xxxxx<br>
					xxxxx<br>
					xxxxx<br>
				</span>
				<span class="back">
					xxxxx<br>
					xxxxx<br>
					xxxxx<br>
					xxxxx<br>
					xxxxx
				</span>
			</div>
			<div class="content">
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx
			</div>
		</article>
	</body>
</html>